<!doctype html>
<html lang="en">
<style>
    .announcementList {
        min-height: 600px;
        display: block;
        width: 50%;
        min-width: 600px;
        list-style-type: disc;
        background-color: #f3f7f0;
        margin-bottom: 0;
    }


    .announcementList li {
        padding-left: 20px;
        padding-right: 20px;
        list-style-type: none;
        margin: 5px;
        align-items: center;
        line-height: 50px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #f0f2f7;
    }

    li .announcementTitle {
        flex: 6;
        font-size: 18px;
        font-weight: 600;
        font-synthesis: style;
    }

    li .layui-btn {
        flex: 1;
    }

    .content {
        min-height: 800px;
        padding-left: 40px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .title {
        flex: 0.5;
    }

    .summary {
        margin-top: 10px;
        flex: 1;
    }

    .substance {
        margin-top: 30px;
        flex: 8;
        display: flex;
    }

    .substance .announcement {
        flex: 1;
        border-bottom: 1px solid #f0f2f7;
    }

    .substance .chart {
        flex: 1;
        border-radius: .5rem;
        --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow);
    }
</style>
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="https://lib.baomitu.com/echarts/5.3.2-rc.1/echarts.common.js"></script>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width initial-scale=1'>
    <title>基于SSM的网上教学系统</title></head>
<body>
<div class="content">
    <div class="title">
        <h2>
            <a name="%E8%BF%8E%E5%AD%A6%E5%90%8E%E5%8F%B0%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F"
               class="md-header-anchor">
            </a>
            <span>基于SSM的网上教学系统</span>
        </h2>
    </div>

    <div class="summary">
        <h3>
            <a name="1.-%E7%AE%80%E4%BB%8B" class="md-header-anchor">
            </a><span>1. 简介</span>
        </h3>
        <p>网上教学系统即利用现有的技术手段建立辅助教学的系统，使用已有的教学资源，使教师与学生通过教学系统进行信息的交互从而弥补传统教学模式的不足，提高教学效率和质量。</p>
        <p>网上教学系统可以构建开放共享协作式学习新模式，实现大范围的教学资源共享，有利于提高教学效率。</p>
    </div>


    <div class="substance">
        <div class="announcement">
            <h3>公告列表</h3>
            <ul class="announcementList" id="announcementList">
                <li>
                    <span class="announcementTitle">asd asdas</span>
                    <button type="button" class="layui-btn">查看详情</button>
                </li>
            </ul>
            <div id="pagination">

            </div>
        </div>
        <div class="chart">
            <div id="container" style="height: 100%"></div>
        </div>
    </div>

</div>


</body>
<script src="/layui/layui.js"></script>
<script src="/js/core.util.js"></script>

<script>
    layui.use(['layer', 'form', 'jquery', 'laypage', 'element'], () => {
        let $ = layui.jquery;
        let laypage = layui.laypage

        let records = new Map()

        let searchParam = {
            current: 1,
            size: 10,
            /*以下为多条件查询参数*/
            title: null
        }

        function getInfoHtml(record) {
            console.log(record)
            return `<li>
                <span class="announcementTitle">${record.title}</span>
                <button type="button" class="layui-btn show"  id="${record.id}">查看详情</button>
            </li>`
        }

        $("body").on('click', '.show', function (event) {
            let id = $(event.target).attr("id");
            showInfo(id)
        });

        function showInfo(id) {
            let open = layer.open({
                title: "公告详情",
                type: 2,
                content: "/index/announcement/info?announcementId=" + id
            });
            layer.full(open);
        }


        function loadList(recordInfos) {
            // 缓存数据
            recordInfos.map(recordInfo => {
                records.set(recordInfo.id, recordInfo)
            })
            recordInfos.map(recordInfo => {
                $(".announcementList").append(getInfoHtml(recordInfo))
            })
            $("#announcementList").trigger("create");
            layui.use('element', function () {
                let element = layui.element;
                element.init();
            });
        }

        /**
         *  加载分页数据
         */
        function loadPageInfo() {
            CoreUtil.sendAjax("/study/announcement/page", searchParam, function (res) {
                //初始化分页器
                laypageList(res.total, searchParam.current);
                //初始化渲染数据
                loadList(res.records);
            }, "GET", false, function (res) {
                //用户列表接口无权限回调
                layer.msg("抱歉！您暂无获取用户列表的权限");
            });
        }

        loadPageInfo()

        //渲染分页插件
        let laypageList = function (count, currentPage) {
            laypage.render({
                elem: 'pagination'
                , count: count
                , limit: searchParam.size
                , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                , curr: location.hash.replace('#!currentPage=', '')     //获取起始页
                , hash: 'currentPage'                                   //自定义hash值
                , jump: function (obj, first) {
                    if (!first) {
                        searchParam.current = obj.curr;
                        searchParam.size = obj.limit;
                        loadPageInfo()
                    }
                }
            });
        };


        let dom = document.getElementById("container");
        let myChart = echarts.init(dom);
        let option;
        let dataList = []
        let userCountList = []
        option = {
            title: {
                text: '总用户数',
                textStyle: {}
            },
            xAxis: {
                type: 'category',
                name: "日期",
                data: dataList,
            },
            yAxis: {
                name: "人数",
                type: 'value',
                animationDelay: function (idx) {
                    return idx * 10;
                }
            },
            series: [
                {
                    data: userCountList,
                    type: 'line'
                }
            ]
        };


        CoreUtil.sendAjax("/study/analyze", null, (res) => {
            res.map(value => {
                const {dateStr, number} = value
                dataList.push(dateStr)
                userCountList.push(number)
            })
            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }
        }, 'GET', null, false, function (res) {
            layer.msg("获取信息失败")
        })


    })

</script>

</html>